<template>
<view class="body">
  <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20213/1/20210301103112_24050.jpeg" class="header" alt></image>
  <choose-city @chooseCity="chooseCity">
    <view class="/news/hesuanjiance/city_didian.php">
      <view class="city-name">{{city}}</view>
      <image src="/static/images/dwicon.png" class="city-icon" alt></image>
    </view>
  </choose-city>
 <view class="main-content">
   <view class="title-content flex">
     <text class="biaohao title">燃油标号</text>
     <text class="youjia title">最新油价</text>
     <text class="zhangdie title">相比上次调整涨跌</text>
   </view>
   <view class="box flex">
     <text class="biaohao-c">92号汽油</text>
     <text class="youjia-c">+ 0.22元/升</text>
     <text class="zhangdie-c">+ 0.22元/升</text>
   </view>
   <view class="box flex">
     <text class="biaohao-c">92号汽油</text>
     <text class="youjia-c">+ 0.22元/升</text>
     <text class="zhangdie-c">+ 0.22元/升</text>
   </view>
   <view class="tip">
    <view class="first">
      以上油价更新于2021-02-18 
    </view>
    <view class="second">
      数据来源各地发改委，仅供参考，实际以各加油站为准
    </view>
   </view>
   <view class="fixed">
     <view class="left btn">
       油价趋势
     </view>
     <view class="right btn">
       <navigator url="/pages/topicality/youjia/youjiajisuan/youjiajisuan">油价计算</navigator> 
     </view>
   </view>
 </view>
</view>
</template>

<script>
import chooseCity from "../../../../component/chooseCity/chooseCity";

export default {
  data() {
    return {
      city: '深圳',
      cityCode: 'sz'
    };
  },

  components: {
    chooseCity
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 确定选择城市
    chooseCity(e) {
      this.setData({
        city: e.detail.city,
        cityCode: e.detail.cityCode
      });
    }

  }
};
</script>
<style>
.body {

  padding-bottom: 110rpx;
}

.city {
  position: absolute;
  top: 26rpx;
  right: 25rpx;
  height: 50rpx;
  display: flex;
  padding: 0 15rpx;
  align-items: center;
  justify-content: center;
  line-height: 37.5rpx;
  border-radius: 187.5rpx;
  background-color: #ffffff;
}

.city-name {
  font-weight: 600;
  color: rgb(14, 20, 87);
  font-size: 26rpx;
}

.city-icon {
  width: 18rpx;
  height: 10rpx;
  margin-left: 10rpx;
}


.header {
  width: 100%;
  height: 260rpx;
  display: block;
}

.main-content {
  box-sizing: border-box;
  width: 710rpx;
  font-size: 25rpx;
  line-height: 35rpx;
  color: #333;
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  text-align: center;
}
.main-content .title-content{
  padding-left: 29rpx;
}
.biaohao,
.biaohao-c {
  flex: 0.2;
}

.youjia,
.youjia-c {
  flex: 0.45;
}

.zhangdie,
.zhangdie-c {
  flex: 0.6;
}

.list-primary,
.table-header {
  font-size: .25rem;
  line-height: .35rem;
  color: #333;
  margin: 0.2rem;
}
.biaohao-c{
  font-weight: bold;
}
.zhangdie-c{
  color: red;
}
.main-content .box {
  font-size: 25rpx;
  line-height: 35rpx;
  color: #333;
  min-height: 73rpx;
  margin: 0 auto;
  margin-top: 29rpx;
  margin-bottom: 29rpx;
  border-radius: 8rpx;
  background: #fafafa;
  padding: 10rpx 0;
  padding-left: 29rpx;
}
.fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 750rpx;
  margin: auto;
  background: #fff;
  padding: 10rpx 0;
}
.fixed .btn{
  width: 35%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 156.25rpx;
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 500;
  background-color: #5395DE;
  margin-left: 27.5rpx;
}

</style>